<template>
  <div class="my">
    <!-- 我的信息 -->
    <div class="myinfo">
      <img src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" alt="">
      <div class="name">用户</div>
    </div>
    <!-- 列表 -->
    <ul class="list">
      <router-link to="" tag="div" class="item">我的订单</router-link>
      <router-link to="" tag="div" class="item">优惠券</router-link>
      <router-link to="" tag="div" class="item">我的足迹</router-link>
      <router-link to="/my/collect" tag="div" class="item">我的收藏</router-link>
      <router-link to="/my/address" tag="div" class="item">地址管理</router-link>
      <router-link to="" tag="div" class="item">联系客服</router-link>
      <router-link to="" tag="div" class="item">帮助中心</router-link>
      <router-link to="/my/feedback" tag="div" class="item">意见反馈</router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  // 计算
  computed: {},
  // 创建
  created() {},
  // 准备
  mounted() {},
  // 方法
  methods: {},
};
</script>

<style lang='scss' scoped>
.my {
  // 我的信息
  .myinfo {
    height: 140px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    background-color: #333;
    img {
      width: 74px;
      height: 74px;
      border-radius: 50%;
    }
    .name {
      margin-left: 15px;
      font-size: 14px;
      color: #fff;
    }
  }
  // 列表
  .list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fff;
    .item {
      width: 33%;
      height: 20px;
      line-height: 20px;
      padding: 25px 0;
      border-right: 0.8px solid rgba(0, 0, 0, 0.15);
      border-bottom: 0.8px solid rgba(0, 0, 0, 0.15);
    }
  }
}
</style>